<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%-- JSTL表达式（判断，循环，输出） --%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <%-- 方法表达式（字符串截取，替换） --%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<div class="comment-wrap">
    <div class="comment-num">
        <span>${pageBean.count}</span>条评论
    </div>
    <div class="title-box">
        <i class="icon i-write"></i>我要评论
    </div>
    <div class="comment-form">
        <textarea id="content" placeholder="这里输入想评论的内容"></textarea>
        <div class="text-right">
            <button class="btn-submit" style="cursor: pointer;" onclick="content()">发表评论</button>
        </div>
    </div>
    <div class="comment-list-box">
        <ul id="comments" style="margin: 0 0 0.275rem 0rem;">
            <c:forEach var="comment" items="${pageBean.list}">
                <li>
                    <div class="user-box">
                        <img src="${comment.headImg}">
                        <div class="user-info">
                            <div class="name">${comment.operatorName}</div>
                            <div class="time">${comment.createTime}</div>
                        </div>
                    </div>
                    <div class="content-info">
                        <div class="content c999">
                            ${comment.commentContent}
                        </div>

                            <c:forEach var="reply" items="${comment.replys}">
                        <div class="reply-box">
                            <div style="cursor: pointer; z-index: 100;" class="see-box" onclick="search(this)">查看回复<i class="icon i-arrow-down"></i></div>
                            <div class="reply-content c999">
                                <span class="author ">客服 回复</span>：
                                ${reply.replyContent}
                            </div>
                        </div>
                            </c:forEach>

                    </div>
                </li>
            </c:forEach>
        </ul>
        <div class="btn-more text-center" id="loadArticles">
            <c:if test="${pageBean.totalPage gt pageBean.currentPage}">
                <a href="javascript:;" onclick="load()">加载更多</a>
            </c:if>
            <c:if test="${pageBean.totalPage <= pageBean.currentPage}">
                没有了
            </c:if>
        </div>
    </div>
</div>
<script>
    var page = 0;

    load();

    function load(){
        page++;
        $.post("<%=basePath%>comment/getComments", {page: page, serviceId: $('#serviceId').val(), serviceType: $('#serviceType').val()}, function (data) {
            var $data = $(data);
            if(page == 1){
                $(".comment-wrap").html($data.html());
            }else {
                $("#comments").append($data.find("#comments").html());
                $("#loadArticles").html($data.find("#loadArticles").html());
            }
        });
    }

    function search(obj){
        var next = $(obj).next();
        if(!next.hasClass("active")){
            next.addClass("active");
            $(obj).addClass("active").html('<span>收起</span><i class="icon i-arrow-down "></i>');
        }else{
            next.removeClass("active");
            $(obj).removeClass("active").html('查看回复<i class="icon i-arrow-down"></i>');
        }
    }

    function content(){
        var content = $.trim($("#content").val());
        if(!content){
            alert("请您输入评论内容");
            return;
        }
        $.post("<%=basePath%>comment/saveComment", {serviceId: $('#serviceId').val(), serviceType: $('#serviceType').val(), commentContent: content}, function (res) {
            if(res.code == 1){
                page = 0;
                load();
            }else{
                alert(res.message);
            }
        });
    }
</script>